<template>
  <FaPanel class="control-sign" title="签章">
    <div class="control-sign__sec">
      <h3 class="control-sign__sec-title">印章</h3>
      <ElPopover ref="all-seals" width="200" placement="right-start">
        <FaSignSelect :data="seals" :viewer="viewer" draggable @drag="dragSeal" />
        <a slot="reference" class="control-sign__link">选择<i class="el-icon-caret-right"></i> </a>
      </ElPopover>
    </div>

    <div class="control-sign__sec">
      <h3 class="control-sign__sec-title">签名</h3>
      <ElPopover ref="all-seals" width="200" placement="right-start">
        <FaSignSelect :data="signatures" type="signature" :viewer="viewer" draggable @drag="dragSignature" />
        <a slot="reference" class="control-sign__link">选择<i class="el-icon-caret-right"></i> </a>
      </ElPopover>
    </div>

    <div class="control-sign__sec">
      <h3 class="control-sign__sec-title">签署日期</h3>

      <div class="control-box" draggable @dragstart="dragWidget($event, WidgetType.DATE)">
        <FaSignImg class="control-sign__date" :data="dateSign" type="date" />
      </div>
    </div>

    <div class="control-sign__sec">
      <h3 class="control-sign__sec-title">签署备注</h3>

      <div class="control-box control-sign__remark" draggable @dragstart="dragWidget($event, WidgetType.REMARK)">
        <i class="icon fa-icon-widget-remark"></i>
        签署备注
      </div>
    </div>
  </FaPanel>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { Widget, WidgetType, WidgetMode, SignData, ActorData, Viewer } from 'fdd-contract'

export default defineComponent({
  name: 'ControlSign',

  props: {
    /** 印章列表 */
    seals: {
      type: Array as PropType<SignData[]>,
      default: () => []
    },

    /** 签名列表 */
    signatures: {
      type: Array as PropType<SignData[]>,
      default: () => []
    },

    /** 日期签名 */
    dateSign: {
      type: Object as PropType<SignData>,
      default: () => ({ src: '' })
    },

    /** 参与方 */
    actor: {
      type: Object as PropType<ActorData>
    },

    /** 合同组件 */
    viewer: {
      type: Object as PropType<Viewer | null>
    }
  },

  setup(props) {
    /** 控件拖拽 */
    function dragWidget(e: DragEvent, type: WidgetType, sign?: SignData) {
      Widget.setWidgetTransfer(e, {
        type,
        mode: WidgetMode.USE,
        sign,
        actor: props.actor
      })
    }

    return {
      WidgetType,

      /** 控件拖拽 */
      dragWidget,

      /** 拖拽印章 */
      dragSeal: (e: DragEvent, item: SignData) => dragWidget(e, WidgetType.SEAL, item),

      /** 拖拽签名 */
      dragSignature: (e: DragEvent, item: SignData) => dragWidget(e, WidgetType.SIGNATURE, item)
    }
  }
})
</script>

<style lang="scss" scoped>
.control-sign {
  &__sec {
    padding: 0 16px;
    font-size: 12px;

    &-title {
      margin: 0.5em 0;
      font-size: 12px;
    }
  }

  &__date {
    width: 100%;
    height: 28px;
  }

  &__remark {
    height: 24px;

    .icon {
      margin-right: 6px;
      font-size: 14px;
    }
  }
}

.control-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  border: 1px dashed rgba($color-primary, 0.8);
  border-radius: 2px;
  cursor: move;
  cursor: grab;
  transition: background-color 0.25s linear;

  &:hover {
    background-color: $color-primary-lightest;
    border-color: $color-primary;
  }
}
</style>
